<html>

<head>
<title>JavaScript Cascading Menu Tree</title>
<script LANGUAGE="JavaScript">
<!--  Hiding Script

// *****************************
// Node 0 = opens in right frame
// Node 1 = opens in new window
// ***************************** 

// *****************************
// Generate Data
// *****************************

function generateTree()
{
var aux1, aux2, aux3, aux4

	foldersTree = folderNode("Start Folder")
		aux1 = appendChild(foldersTree, folderNode("JavaScript"))
			aux2 = appendChild(aux1, leafNode("Scripts"))
				appendChild(aux2, generateDocEntry(0, "JavaScripts.com", "http://www.javascripts.com", ""))
				appendChild(aux2, generateDocEntry(0, "JavaScript Planet", "http://www.geocities.com/SiliconValley/7116/", ""))
				appendChild(aux2, generateDocEntry(0, "Polands' JavaScript", "http://www.sapien.net/demo/javascript/", ""))
			aux2 = appendChild(aux1, leafNode("Tutorials"))
				appendChild(aux2, generateDocEntry(0, "Ask the JavaScript Pro", "http://www.inquiry.com/techtips/js_pro/", ""))
				appendChild(aux2, generateDocEntry(0, "JavaScript 411", "http://www.freqgrafx.com/411/", ""))
		aux1 = appendChild(foldersTree, folderNode("Links"))
			aux2 = appendChild(aux1, folderNode("Internet"))
				aux3 = appendChild(aux2, leafNode("Browsers"))
					appendChild(aux3, generateDocEntry(1, "MS Internet Explorer", "www.microsoft.com/ie/", ""))
					appendChild(aux3, generateDocEntry(1, "Netscape Communicator", "home.netscape.com", ""))
				aux3 = appendChild(aux2,  leafNode("Computers"))
					appendChild(aux3,generateDocEntry(1, "PCworld", "www.pcworld.com/welcome.html", ""))
					appendChild(aux3,generateDocEntry(1, "Byte", "www.byte.com/", ""))
					appendChild(aux3,generateDocEntry(1, "cNET", "www.cnet.com", ""))
					appendChild(aux3,generateDocEntry(1, "ZDNet", "www.zdnet.com", ""))
			aux2 = appendChild(aux1, folderNode("Downloads"))
				aux3 = appendChild(aux2,  leafNode("Shareware"))
					appendChild(aux3, generateDocEntry(1, "Windows95.com", "www.windows95.com/apps", ""))
					appendChild(aux3, generateDocEntry(1, "Download.com", "www.download.com", ""))
					appendChild(aux3, generateDocEntry(1, "ZDNet's Hotfiles", "www.hotfiles.com", ""))
			aux2 = appendChild(aux1, leafNode("Search"))
				appendChild(aux2,generateDocEntry(1, "HotBot", "www.hotbot.com", ""))
				appendChild(aux2,generateDocEntry(1, "Yahoo", "www.yahoo.com", ""))
				appendChild(aux2,generateDocEntry(1, "Lycos", "www.lycos.com", ""))
		aux1 = appendChild(foldersTree, folderNode("Total Java Scripts"))
appendChild(aux2,generateDocEntry(1, "HotBot", "www.hotbot.com", ""))
			

aux2 = appendChild(aux1, folderNode("Downloads"))
		
}

// *****************************
// Auxiliary function to create the node
// *****************************
function folderNode(name)
{
var arrayAux
	arrayAux = new Array
	arrayAux[0] = 0
	arrayAux[1] = 0
	arrayAux[2] = 0
	arrayAux[3] = name
        
        return arrayAux
}

// *****************************
// Auxiliary function to create the node
// *****************************
function leafNode(name)
{
var arrayAux
	arrayAux = new Array
	arrayAux[0] = 0
	arrayAux[1] = 0
	arrayAux[2] = 1
	arrayAux[3] = name
        
        return arrayAux
}

function appendChild(parent, child)
{
	parent[parent.length] = child
	return child
}

function generateDocEntry(icon, docDescription, link)
{
var retString =""

	if (icon==0)
		retString = "<A href='"+link+"' target=folderFrame><img src='doc.gif' alt='Opens in right frame'"
	else
		retString = "<A href='http://"+link+"' target=_blank><img src='link.gif' alt='Opens in new window'"
	retString = retString + " border=0></a><td nowrap><font size=-1 face='Arial, Helvetica'>" + docDescription + "</font>"

	return retString

}


// *****************************
// Display functions
// *****************************

function redrawTree()
{
var doc = top.treeFrame.window.document

	doc.clear()
	doc.write("<body bgcolor='white'>")	
	redrawNode(foldersTree, doc, 0, 1, "")
	doc.close()
}

function redrawNode(foldersNode, doc, level, lastNode, leftSide)
{
var j=0
var i=0

	doc.write("<table border=0 cellspacing=0 cellpadding=0>")
	doc.write("<tr><td valign = middle nowrap>")

	doc.write(leftSide)

	if (level>0)
		if (lastNode) //the last 'brother' in the children array
		{
			doc.write("<img src='lastnode.gif' width=16 height=22>")
			leftSide = leftSide + "<img src='blank.gif' width=16 height=22>" 
		}
		else
		{
			doc.write("<img src='node.gif' width=16 height=22>")
			leftSide = leftSide + "<img src='vertline.gif' width=16 height=22>"
		}

	displayIconAndLabel(foldersNode, doc)
	doc.write("</table>")

	if (foldersNode.length > 4 && foldersNode[0]) //there are sub-nodes and the folder is open
	{
		if (!foldersNode[2]) //for folders with folders
		{
			level=level+1
			for (i=4; i<foldersNode.length;i++)
				if (i==foldersNode.length-1)
					redrawNode(foldersNode[i], doc, level, 1, leftSide)
				else
					redrawNode(foldersNode[i], doc, level, 0, leftSide)
		}
		else //for folders with documents
		{
			for (i=4; i<foldersNode.length;i++)
			{
				doc.write("<table border=0 cellspacing=0 cellpadding=0 valign=center>")
				doc.write("<tr><td nowrap>")
				doc.write(leftSide)
				if (i==foldersNode.length - 1)
					doc.write("<img src='lastnode.gif' width=16 height=22>")
				else
					doc.write("<img src='node.gif' width=16 height=22>")
				doc.write(foldersNode[i])
				doc.write("</table>")
			}
		}
	}
}

// *****************************
// Creates the html code to display a folder and its label
// *****************************
function displayIconAndLabel(foldersNode, doc)
{
	doc.write("<A href='javascript:top.openBranch(\"" + foldersNode[3] + "\")'><img src=")
	if (foldersNode[1])
		doc.write("openfolder.gif width=24 height=22 border=noborder></a>")
	else
		doc.write("closedfolder.gif width=24 height=22 border=noborder></a>")
	doc.write("<td valign=middle align=left nowrap>")
	doc.write("<font size=-1 face='Arial, Helvetica'>"+foldersNode[3]+"</font>")
}

// *****************************
// Recursive functions
// *****************************

//when a parent is closed all children also are
function closeFolders(foldersNode)
{
var i=0

        if (!foldersNode[2])
	{
        	for (i=4; i< foldersNode.length; i++)
	           	closeFolders(foldersNode[i])

	}
        foldersNode[0] = 0
        foldersNode[1] = 0
}

//recursive over the tree structure
//called by openbranch
function clickOnFolderRec(foldersNode, folderName)
{
var i=0

        if (foldersNode[3] == folderName)
	{
		if (foldersNode[0])
			closeFolders(foldersNode)
		else
		{
			foldersNode[0] = 1
                	foldersNode[1] = 1
		}
	}
	else
	{
        	if (!foldersNode[2])
        		for (i=4; i< foldersNode.length; i++)
	           		clickOnFolderRec(foldersNode[i], folderName)
	}
}


// *****************************
// Event handlers
// *****************************

//called when the user clicks on a folder
function openBranch(branchName)
{
	clickOnFolderRec(foldersTree, branchName)
	if (branchName=="Start folder" && foldersTree[0]==0)
		top.folderFrame.location="basefolder.htm"
	timeOutId = setTimeout("redrawTree()",100)
}

//called after this html file is loaded
function initializeTree()
{
	generateTree()
	redrawTree()
}

var foldersTree = 0
var timeOutId = 0
generateTree()


// end hiding script  -->
</script>
</head>

<frameset onLoad="initializeTree()" FRAMEBORDER="0" FRAMESPACING="0" BORDER="0"
cols="225,*">
  <frame src="tree.htm" name="treeFrame">
  <frame SRC="folder.htm" name="folderFrame">
  <noframes>
  <body>
  </body>
  </noframes>
</frameset>
</html>
